import React from 'react';
import {  } from 'antd-mobile';
import {  
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import { useDispatch, useMappedState } from 'redux-react-hook';
import { actionArticle, actionChangeRoom } from '../../action';
import './style.less';
import { rpx } from '../../utils';
import { AHKARI, AMY } from '../../constant';

let touching = false; // 全局点击标记位
export default function Poem({ content }) {
  const dispatch = useDispatch();
  const mapState = React.useCallback((state) => {
    return {
      state,
      uiStore: state.uiStore,
      poem: state.poem,
    };
  }, []);
  const { state, uiStore, poem } = useMappedState(mapState);


  // 你点击了聊天栏的内容
  const youTouch = (content) => {
    if ( touching ) {
      return;
    } else {
      touching = true;
      setTimeout(() => {
        touching = false;
      }, 300);
    }
    
    if ( content.sayType === 'article' ) {
      // 你点击了诗歌
      if ( content.title.includes('晶圆') ) {
        actionArticle({
          which: 'POEN_ABOUT_SPACE',
        }, state, dispatch);
      } else if ( content.title.includes('时间') ) {
        actionArticle({
          which: 'POEN_ABOUT_TIME',
        }, state, dispatch);
      } else if ( content.title.includes('基因') ) {
        actionArticle({
          which: 'POEN_ABOUT_U',
        }, state, dispatch);
      }

      setTimeout(() => {
        window.dispatchEvent(
          new CustomEvent('weSay', {
            bubbles: true,
            detail: {
               data: {},
            },
          }),
        );
      }, 500);

    } 
  }


  let avator = <img className="avator" style={{
    height: rpx(80),
    width: rpx(80),
    borderRadius: rpx(8)
  }} src={ content.type === 'ahkari' ? AHKARI.AVATOR : AMY.AVATOR } alt="" />;
  let ahkariDot = <img 
    src="https://gw.alicdn.com/imgextra/i4/O1CN01TUXMkl1s8j16vjI9u_!!6000000005722-2-tps-12-24.png" 
    alt="" 
    style={{
      width: rpx(10),
      height: rpx(23),
      position: 'absolute',
      left: rpx(-8),
      top: rpx(30),
    }}
  />;
  let amyDot = <img 
    src="https://gw.alicdn.com/imgextra/i4/O1CN01LcrQJC1D5c568QOaR_!!6000000000165-2-tps-12-24.png" 
    alt="" 
    style={{
      width: rpx(10),
      height: rpx(23),
      position: 'absolute',
      right: rpx(-8),
      top: rpx(30),
    }}
  />

  const renderContent = (poem) => {
    if ( poem.sayType === 'article' ) {
      return <div className="article" style={{
        width: rpx(470),
        height: rpx(245),
        padding: rpx(18),
        borderRadius: rpx(8),
      }}>
        <div className="a-title" style={{
          marginBottom: rpx(10),
        }}>
          {poem.title}
        </div>
        <div className="a-mid" style={{
          height: rpx(136),
        }}>
          <div className="a-mid-left" style={{
            width: rpx(300),
            fontSize: rpx(28),
            color: '#737373',
            paddingRight: rpx(18),
          }}>
            {poem.desc}
          </div>
          <div className="a-mid-right">
            <img src={poem.img} style={{
              width: rpx(106),
              height: rpx(106),
              paddingRight: rpx(18),
            }} alt="" />
          </div>
        </div>
        <div className="a-bottom" style={{
          height: rpx(40),
          border: 'none',
          borderTop: `${rpx(1)} solid #e8e8e8`,
        }}>
          <img className="a-bottom-logo" src={poem.userLogo} style={{
            height: rpx(26),
            width: rpx(26),
            borderRadius: rpx(13),
            marginRight: rpx(8),
          }} alt="" />
          <span className="a-bottom-user" style={{
            fontSize: rpx(26),
            color: '#747474',
          }}>{poem.user}</span>
        </div>
      </div>
    } else if ( poem.sayType === 'img' ) {
      return <div className="img" style={{
        // padding: rpx()
        borderRadius: rpx(8),
        width: rpx(200),
      }}>
        <img src={poem.img} alt="" style={{
          width: rpx(200),
          borderRadius: rpx(8),
        }} />
      </div>;
    } else {
      return <div className="content" style={{
        padding: rpx(18),
        borderRadius: rpx(8)
      }}>
        {
          content.text
        }
      </div>
    }
  }  

  const renderPoem = () => {
    if ( content.type === 'catSuger' ) {
      if ( content.sayType === 'placeholder' ) {
        return null;
      } else if ( content.sayType === 'date' ) {
        return <div className="suger-container" style={{
          height: rpx(44),
          marginBottom: rpx(32),
          marginTop: rpx(32),
        }}>
          <span className="suger-text" style={{
            fontSize: rpx(30),
          }}>{content.date}</span>
        </div>;
      } else if ( content.sayType === 'love-left' ) {
        return <div className="suger-love left" style={{
          height: rpx(60),
          marginBottom: rpx(32),
          marginTop: rpx(32),
        }}>
          <span className="suger-text" style={{
            fontSize: rpx(30),
          }}>{content.date}</span>
        </div>;
      } else if ( content.sayType === 'love-right' ) {
        return <div className="suger-love right" style={{
          height: rpx(44),
          marginBottom: rpx(32),
          marginTop: rpx(32),
        }}>
          <span className="suger-text" style={{
            fontSize: rpx(30),
          }}>{content.date}</span>
        </div>;
      } else {

      }
    } else {
      return <div className={`${content.type} poem-container`} style={{
        marginBottom: rpx(32),
      }} onClick={() => {
        youTouch(content);
      }}>
        <div className="avator-wrap" style={{
          width: rpx(130),
          // height: ''
        }}>
          {
            content.type === 'ahkari' ? avator : null
          }
        </div>
        <div className="content-wrap" style={{
          
        }}>
          { 
            content.type === 'ahkari' && ahkariDot
          }
          {
            renderContent(content)
          }
          { 
            content.type === 'amy' && amyDot
          }
        </div>
        <div className="avator-wrap" style={{
          width: rpx(130),
        }}>
          {
            content.type === 'amy' ? avator : null
          }
        </div>
      </div>;
    }
  }

  return renderPoem();
}
